<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>switch style-3</title>
    <link rel="stylesheet" href="../../model/jsFn.css">
    <link rel="stylesheet" href="../../model/element.css">
</head>
<body>
<!--目录-->
<div class="catalog">
    <h2>目录</h2>
    <ul>
        <li>
            <p><a href="#element">< switch style="2" ></a></p>
        </li>
        <li>
            <p><a href="#attribute">属性</a></p>
            <ul>
                <li><p><a href="#example">实例</a></p></li>
                <li><p><a href="#optional">可选属性</a></p></li>
                <li><p><a href="#note">提示和注释</a></p></li>
                <li><p><a href="#sketch">效果图</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#jsFn">js函数</a></p>
            <ul>
                <li><p><a href="#jsFn_val">val</a></p></li>
            </ul>
        </li>
        <li>
            <p><a href="#childElement">子标签</a></p>
            <ul>
                <li><p><a href="#childElement_lp">lp</a></p></li>
                <li><p><a href="#childElement_p">p</a></p></li>
                <li><p><a href="#childElement_limg">limg</a></p></li>
                <li><p><a href="#childElement_rimg">rimg</a></p></li>
            </ul>
        </li>
    </ul>
</div>
<!--标签-->
<div id="element">
    <h2>switch style-2</h2>
    <div>简介:</div>
    <p>多行开关的按钮，只能选一个</p>
</div>
<!--属性-->
<div id="attribute">
    <h2>属性</h2>
    <div style="margin-left: 25px" id="example">
        <h3>实例:</h3>
        <!--xmp标签可以直接书写xml格式文本-->
        <xmp>
            <switch style=" 2 " background="#ffffff" id="switch" margin="0"
                    num="1" off="img.oval_white.png"
                    on="img.oval_red.png" padding="6,0,6,0">
                <item>
                    <lp>个人钱包支付</lp>
                    <limg attr="24">img.card_1.png</limg>
                </item>
                <item>
                    <lp>支付宝支付</lp>
                    <limg attr="24">img.alipay.png</limg>
                </item>
                <item>
                    <lp>微信支付</lp>
                    <limg attr="24">img.wechat.png</limg>
                </item>
            </switch>
        </xmp>
    </div>
    <div id="optional">
        <h3>可选属性:</h3>
        <table >
            <tbody>
                <tr>
                    <th>属性</th>
                    <th>值</th>
                    <th>描述</th>
                </tr>
                <tr>
                    <td>off</td>
                    <td>true/false</td>
                    <td>true:选中，false ：未选中</td>
                </tr>
                <tr>
                    <td>imgsize</td>
                    <td>30/ 30，30</td>
                    <td>设置宽高30，一个数的时候，默认表示宽高都是一样</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="note">
        <h3>提示和注释:</h3>
    </div>
    <div id="sketch">
        <h3>效果图:</h3>
        <img src="img/switch2.png" alt="">
    </div>
</div>
<!--js方法-->
<div id="jsFn">
    <h2>js方法</h2>
    <div class="jsFnModel" id="jsFn_val">
        <h3>val:</h3>
        <div class="shape">
            <h3>函数使用样式</h3>
            <p>switch.val() -> array</p>
        </div>
        <div class="profile">
            <h3>函数功能简介</h3>
            <p>得到选中的项</p>
        </div>
        <div class="version">
            <p>稳定性;2 - 稳定的</p>
            <p>新增于:v0.0.0</p>
        </div>
        <div class="params">
            <h3>参数列表:</h3>
            <p>无</p>
        </div>
        <div class="res">
            <h3>返回值:</h3>
            <p>array</p>
            <p>选中的数组</p>
        </div>
        <div class="code">
            <h3>例子</h3>
            <pre>
            <code>
                let array = document.$('switch2').val();
                console.log(array);
            </code>
        </pre>
        </div>
        <div class="error">
            <h3>抛出错误</h3>
        </div>
    </div>
</div>
<!--子标签-->
<div id="childElement">
    <h2>子标签 (switch 子标签下的子标签)</h2>
    <div id="childElement_lp">
        <h3>lp</h3>
        <p>一条选择条目的左边文字</p>
        <p>用法参照 <a href="../p/index.html"> < p ></a> </p>
    </div>
    <div id="childElement_p">
        <h3>p</h3>
        <p>一条选择条目的左边文字的 下面文字</p>
        <p>用法参照 <a href="../p/index.html"> < p ></a> </p>
    </div>
    <div id="childElement_limg">
        <h3>limg</h3>
        <p>一条选择条目的左边图片</p>
        <p>用法参照 <a href="../img/index.html"> < img ></a> </p>
    </div>
    <div id="childElement_rimg">
        <h3>rimg</h3>
        <p>一条选择条目的右边图片</p>
        <p>用法参照 <a href="../img/index.html"> < img ></a> </p>
    </div>

</div>
<div class="author"><p>by-姜进</p></div>
</body>
</html>